<template >
    <div :style="{'text-align':'left','height':$store.state.clientHeight+'px','background':'#eee'}">
        <!--login page  {{$store.state.isLogin}} bb
        <el-button type="primary" @click="login">登录</el-button>-->
        <el-row style="height: 120px;  display:table-cell; vertical-align:bottom;" >
            <div class="erp_title">ERP系统</div>
            <div class="erp_remark">erp  system</div>
        </el-row>
        <el-row class="login_area"  >
            <el-col :span="12">
                &nbsp;
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="login_title">
                        <span>LOGIN 用户登录</span>
                    </div>
                    <el-form ref="formRef" :model="form" :rules="rules"  label-width="100px" >
                        <el-row  >
                            <el-form-item label="登录名"  prop="loginName">
                                <el-input v-model="form.loginName" @focus="clean" class="login_input"></el-input>
                            </el-form-item>
                        </el-row>

                        <el-row  style="margin:15px 0px 15px 0px">
                            <el-form-item label="密码"  prop="loginPwd" >
                                <el-input type="password" v-model="form.loginPwd" @focus="clean"  class="login_input"></el-input>
                            </el-form-item>
                        </el-row>

                        <el-row style="text-align: right;margin: 0px 0px 10px 0px" >
                            <el-button style="width: 100%" type="primary" size="medium" @click="submitLogin">立即登录</el-button>
                        </el-row>

                        <el-row style="height: 30px" >
                            <el-alert v-if="isError" :title="errorMsg" type="error"></el-alert>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="erp_bottom"  >
            Copyright©2004-2022 版权所有
        </el-row>
    </div>
</template>
<script>
    import {encryptLogin} from '../assets/js/encrypt'
    export default {
        name:'login',
        components: {
        },
        data() {
            return {
                form:{
                    loginName:null,
                    loginPwd:null,
                    serverTime:null,
                },
                rules: {
                    loginName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    loginPwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                isError:false,
                errorMsg:'',
            }
        },
        created() {

        },
        mounted() {
            this.$store.commit('initState');
        },
        methods: {
            //提交登录
            submitLogin(){
                let _this=this;
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        _this.login();
                    }
                });
            },
            //登录
            async login() {
                let _this=this;
                await _this.getServerTime();//获取服务器时间
                let loginData=encryptLogin(this.form.loginName,this.form.loginPwd,null,this.form.serverTime);
                let url="/login"
                let params={loginData:loginData};
                await _this.$http.post(url,params).then(function(res){
                    if(res.data.success){
                        let userBO=res.data.data;
                        console.info("userBO",userBO);

                        _this.$store.dispatch("setSessionUser",userBO.sessionUser);
                        localStorage.setItem("userMsg",JSON.stringify(_this.$store.state.sessionUser))
                        _this.$actions.setGlobalState({sessionUser: _this.$store.state.sessionUser});//给微前端传session
                        _this.$http.defaults.headers={'token':_this.$store.state.sessionUser.token}//设置token

                        _this.$store.dispatch("setMenuList",userBO.menuList);
                        localStorage.setItem("userMenu",JSON.stringify(_this.$store.state.menuList))

                        _this.$store.dispatch("setMicroConfigListByApp",userBO.appList);
                        localStorage.setItem("userMicro",JSON.stringify(_this.$store.state.microConfigList))

                        if (userBO.homeMenu){
                            console.log("homeMenu",userBO.homeMenu)
                            let menu=userBO.homeMenu;

                            let menuData={id:menu.id,menuName:menu.menuName,path:menu.menuUrl,appCode:menu.appCode,compo:menu.compo,frame:menu.frame};
                            _this.$store.dispatch("setHomeMenu",menuData);
                            localStorage.setItem("userHome",JSON.stringify(_this.$store.state.homeMenu))
                        }else{
                            console.warn("用户未配置首页")
                        }

                        setTimeout(function() {
                            let _path="/"+_this.$store.state.homeMenu.appCode+_this.$store.state.homeMenu.path
                            _this.$router.push({ path: _path})//跳转到首页
                        },100);
                    }else{
                        _this.isError=true;
                        _this.errorMsg=res.data.msg;
                    }
                },function(e){
                    _this.$message.error('操作错误！'+e);
                });
            },

            async getServerTime() {
                let _this=this;
                let url="/getServerTime"
                let params={};
                await _this.$http.post(url,params).then(function(res){
                    if(res.data.success){
                        _this.form.serverTime=res.data.data;
                    }else{
                       _this.$message.error("取值错误");
                    }
                },function(e){
                    _this.$message.error('操作错误！'+e);
                });
            },
            clean(){
                this.isError=false;
                this.errorMsg='';
            }

        }
    }
</script>

<style>
    body{

    }

    .erp_title{
        font-size: 24px;
        color: #555;
        margin:0px 0px 0px 250px;
    }
    .erp_bottom{
        font-size: 12px;
        color: #555;
        margin:10px 100px 0px 0px;
        text-align: right;
    }
    .erp_remark{
        font-size: 12px;
        color: #666;
        margin:0px 0px 10px 250px;
    }
    .login_title{
       font-size: 14px;
        font-weight: bold;
    }
    .login_area{
        height: 400px;
        padding: 40px 0px 30px 0px;
        background: url("../assets/img/login_bg.jpeg") no-repeat;
        background-position:center;
    }
    .input_label{
        text-align: right; padding:10px 10px 0px 0px
    }
    .login_input .el-input__inner{
        line-height:35px !important ;height: 35px !important;
    }
    .box-card {
        width: 450px;
    }
</style>
